<template>
  <div>
    <a-row type="flex" justify="center">
      <a-col :span="6">
        <div class="grid-content"></div>
      </a-col>
    </a-row>

    <a-row type="flex" justify="center">
      <a-col :span="6">
        <a-card title="需要鉴权">
          <a-form
              id="components-form-demo-normal-login"
              :form="form"
              class="login-form"
              @submit="handleSubmit"
          >
            <a-form-item>
              <a-input
                  v-decorator="[
          'LoginUserName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
                  placeholder="Username"
              >
                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                  v-decorator="[
          'LoginPassword',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                  type="password"
                  placeholder="Password"
              >
                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit" class="login-form-button">
                Log in
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
        if(values.LoginUserName === "admin" && values.LoginPassword === "admin") {
          //this.$router.push("/");
          this.$ms('登陆成功', () => {
            this.$router.push("/");
          });
        }
        else {
          this.$me('密码错误');
        }
      });
    },
  },
};
</script>
<style>

.grid-content {
  /* background: rgb(14, 214, 131); */
  /*border-radius: 4px;*/
  min-height: 80px;
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>